/**
 * @Author Awen
 * @Date 2024/06/01
 * @Email wengaolng@gmail.com
 **/

.btnBlock {
  position: relative;
  box-sizing: border-box;

  display: block;
  font-size: 13px;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  letter-spacing: 1px;
  border-radius: 5px;
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;

  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items: center;
  justify-content: center;
  justify-items: center;

  box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
  -webkit-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
  -moz-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);

  :global{
    span{
      padding-left: 8px;
    }
  }
}

.disabled{
  pointer-events: none;
}

.default{
  color: var(--go-captcha-theme-default-color);
  border: 1px solid #50a1ff;
  border-color: var(--go-captcha-theme-default-border-color);
  background-color: var(--go-captcha-theme-default-bg-color);
  cursor: pointer;

  &:hover{
    background-color: var(--go-captcha-theme-default-hover-color) !important;
  }
}

.error{
  cursor: pointer;
  color: var(--go-captcha-theme-error-color);
  background-color: var(--go-captcha-theme-error-bg-color);
  border: 1px solid #ff5a34;
  border-color: var(--go-captcha-theme-error-border-color);
}

.warn{
  cursor: pointer;
  color: var(--go-captcha-theme-warn-color);
  background-color: var(--go-captcha-theme-warn-bg-color);
  border: 1px solid #ffbe09;
  border-color: var(--go-captcha-theme-warn-border-color);
}

.success{
  color: var(--go-captcha-theme-success-color);
  background-color: var(--go-captcha-theme-success-bg-color);
  border: 1px solid #8bc640;
  border-color: var(--go-captcha-theme-success-border-color);
  pointer-events: none;
}

.ripple{
  position: relative;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items: center;
  justify-content: center;
  justify-items: center;

  :global {
    svg {
      position: relative;
      z-index: 2;
    }
  }

  & > *{
    z-index: 2;
  }

  &::after {
    background-color: var(--go-captcha-theme-default-border-color);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:  -11px;
    margin-left:  -11px;
    z-index: 1;

    animation: ripple 1.3s infinite;
    -moz-animation: ripple 1.3s infinite;
    -webkit-animation: ripple 1.3s infinite;
    animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
  }
}

@keyframes ripple {
  0% { opacity: 0; }
  5% { opacity: 0.05; }
  20% { opacity: 0.35; }
  65% { opacity: 0.01;  }
  100% {
    transform: scaleX(2) scaleY(2);
    opacity: 0;
  }
}
@-webkit-keyframes ripple {
  0% { opacity: 0; }
  5% { opacity: 0.05; }
  20% { opacity: 0.35; }
  65% { opacity: 0.01;  }
  100% {
    transform: scaleX(2) scaleY(2);
    opacity: 0;
  }
}